<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function faceChange() {
            //得到下拉框对象
            var selectObj = document.getElementById("faceSelect");
            //弹出消息框，会阻塞
            // alert(selectObj.value);

            //得到图片对象
            var imgObj = document.getElementById("faceImg");
            if (selectObj.value == "1") {
                imgObj.src = "img/1.png";
            } else if (selectObj.value == "2") {
                imgObj.src = "img/2.png";
            } else if (selectObj.value == "3") {
                imgObj.src = "img/3.png";
            } else {
                imgObj.src = "img/4.png";
            }
        }

        function imgChange(selectObj){
            document.getElementById("faceImg").src=selectObj.value;
            document.getElementById("bodyObj").style.backgroundImage="url("+selectObj.value+")";
        }
    </script>
</head>
<body id="bodyObj">
<img src="img/1.png" width="300px" height="300px" id="faceImg"><br>
<!--anchange（）表示当下拉框选项变化时，触发的事件-->
<select id="faceSelect" onchange="imgChange(this)">
    <option value="img/1.png">春香</option>
    <option value="img/2.png">夏香</option>
    <option value="img/3.png">秋香</option>
    <option value="img/4.png">冬香</option>
</select>
</body>
</html>